import { useSelector, useDispatch } from "react-redux";

import { addTask, delTask, delTaskWithConfirm } from "./store/actions";

export default function App() {
  const dispatch = useDispatch();

  const tasks = useSelector((state) => state.tasks);

  const handleKeyUp = (e) => {
    if (e.key === "Enter") {
      const value = e.target.value;

      // 派发动作
      dispatch(addTask(value));
    }
  };

  const handleDel = (id) => {
    console.log("id", id);

    dispatch(delTaskWithConfirm(id));

    // if (window.confirm("你确认嘛")) {
    //   dispatch(delTask(id));
    // }

    // 派发动作
    // dispatch(delTask(id));
  };

  return (
    <div>
      <h1>Tasks</h1>

      <input type="text" placeholder="请输入" onKeyUp={handleKeyUp} />

      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <input type="checkbox" checked={task.done} onChange={() => {}} />
            <span>{task.text}</span>

            <button onClick={() => handleDel(task.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
